<template>
  <d-config-provider>
    <div>
      <h4>d-input</h4>
      <d-input v-model="value" @input="input" @blur="blur" />
      <d-input v-model="value" @input="input" @blur="blur" />
      <d-divider />

      <h4>d-input-group</h4>
      <div>compact:</div>
      <d-input-group compact>
        <d-input style="width: 20%" default-value="0571" />
        <d-input style="width: 30%" default-value="26888888" />
      </d-input-group>
      <div style="margin-top:45px">not compact:</div>
      <d-input-group>
        <d-input style="width: 20%" default-value="0571" />
        <d-input style="width: 30%" default-value="26888888" />
      </d-input-group>
      <d-divider />

      <h4>d-textarea</h4>
      <d-textarea
        placeholder="input textarea..."
        :value.sync="textareaValue"
        :auto-size="{ minRows: 3, maxRows: 15 }"
      />
    </div>
  </d-config-provider>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      textareaValue: ''
    };
  },
  methods: {
    input() {
      console.log('input');
    },
    blur() {
      console.log('blur');
    }
  }
};
</script>

<style lang="scss" scoped></style>
